<template>
	<view class="history_single_box">
		<!-- 维修履历 -->
		<view class="user_message">
			<view class="user_message_user utils_patternOne">
				<!-- 区块标题 -->
				<view class="utils_title">
					<view class="title_text">
						<text class="title_left_text">工单编号：{{orderId}}</text>
						<view class="tips"></view>
					</view>
					
				</view>
				
				<!-- 内容 -->
				<view class="user_message_conetnt" v-if="OrderPartsTableData.length > 0">
					<view class="user_conetnt_item" v-for="(item, index) in OrderPartsTableData" :key="index">
						<text class="user_content_text">维修类型：{{item.repairType}}</text>
						<text class="user_content_text">配件代码：{{item.code}}</text>
						<text class="user_content_text">配件名称：{{item.name}}</text>
						<text class="user_content_text">配件数量：{{item.num}}</text>
						<text class="user_content_text">收费类型：{{item.chargeType}}</text>
						<text class="user_content_text">是否不修：{{item.noFix}}</text>
						<text class="user_content_text">不修原因：{{item.reason}}</text>
					</view>
				</view>
				<view class="user_message_conetnt" v-else>
					<view class="user_conetnt_item">
						<text class="user_content_text">维修类型：--</text>
						<text class="user_content_text">配件代码：--</text>
						<text class="user_content_text">配件名称：--</text>
						<text class="user_content_text">配件数量：--</text>
						<text class="user_content_text">收费类型：--</text>
						<text class="user_content_text">是否不修：--</text>
						<text class="user_content_text">不修原因：--</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js'
	// import utils from '@/utils/uitils.js'
	export default {
		data () {
			return {
				orderId: '',
				OrderPartsTableData: [],
			}
		},
		
		onLoad (options) {
			console.log('接收到的参数', options)
			this.orderId = options.orderId
		},
		
		mounted() {
			this.handleOpenAttachment()
		},
		
		methods: {
			// 打开历史工单-查看配件
			async handleOpenAttachment() {
				try {
					this.historyOrderByKVTableLoading = true
					const historyOrderRes = await apiRqs.getCusMaintainPart(this.orderId)
					// this.OrderPartsTableData = historyOrderRes.data
					this.OrderPartsTableData = historyOrderRes.data.map(item => {
					    // 遍历对象的属性，将值为 null 的属性替换为 "--"
					    for (let key in item) {
					        if (item[key] === null) {
					            item[key] = "--";
					        }
					    }
					    return item;
					});
					console.log('--------------------历史工单对应配件信息数据', this.OrderPartsTableData);
				} catch (error) {
					console.log('获取历史工单配件信息失败', error)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.history_single_box {
		padding: 24rpx;
		background-image: url('../../../static/byd-img/jiaoji@1x.png');
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		
		/* 公共样式-内外边距、背景色、边框弧度 */
		.utils_patternOne {
			margin-bottom: 32rpx;
			padding: 24rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}
		
		/* 公共样式-区块标题 */
		.utils_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
			
			.title_text {
				position: relative;
				font-size: 28rpx;
				font-weight: 500;
				color: #1D2129;
				.title_left_text {
					margin-left: 24rpx;
				}
				.tips {
					position: absolute;
					top: 10rpx;
					left: 0;
					border-radius: 8rpx;
					width: 8rpx;
					height: 24rpx;
					background: #0063FF;
				}
			}
			
			.utils_right_text {
				font-size: 28rpx;
				font-weight: bold;
				color: #0256FF;
			}
			
			.right_text_title {
				font-size: 24rpx;
				color: #86909C;
			}
		}
		
		/* 客户基础信息 */
		.user_message {
			margin-top: 32rpx;
			.user_message_user {
				.user_message_conetnt {
					.user_conetnt_item {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						margin-bottom: 24rpx;
						padding: 24rpx;
						border-radius: 16rpx;
						background: #F7F8FA;
						
						font-family: 思源黑体;
						font-size: 24rpx;
						color: #4E5969;
						
						.user_content_text {
							margin-bottom: 24rpx;
							&:nth-child(odd) {
								margin-right: 10rpx;
								min-width: 400rpx;
							}
							.user_cart_copy {
								margin-left: 20rpx;
								color: #0063FF;
							}
						}
						
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
		
	}
</style>